<template>
  <navbar title="核销结果" :isBack="true"></navbar>
  <loading v-if="!data"></loading>
  <template v-else>
    <template v-if="data.code == 1">
      <view class="content flex-direction-column">
        <image mode="aspcetFill" :src="data.msg.cover"></image>
        <view class="title"> {{ data.msg.name }} </view>
        <view class="desc flex-direction-column">
          <view class="item flex">
            <view class="label">姓名</view>
            <view class="name flex-direction-column">
              <text v-for="(item, index) in data.msg.user" :key="index">{{ item.name }}（{{ item.mobile }}）</text>
            </view>
          </view>
          <view class="item flex">
            <view class="label">项目</view>
            <view class="name flex-direction-column">
              <text>{{ data.msg.group }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="btn" @click="confirm">确认核销</view>
    </template>
    <template v-else>
      <view class="page flex-direction-column" :style="{ height: tools.clientTopHight() }">
        <image src="/pagesA/static/image/11.png"></image>
        <text>暂无核销结果</text>
        <view class="btns" @click="tools.scanCode().then((res) => getCheckResultApi(res))">重新扫描</view>
      </view>
    </template>
  </template>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { getCheckOrderDo, getCheckResult } from '@/service/api/user'
import tools from '@/utils/tools'
import { ref } from 'vue'

let data = ref(null)

// 确定按钮
const confirm = () => {
  tools.showModel('提示', '是否确认核销').then(() => {
    getCheckOrderDoApi(data.value.msg.id)
  })
}

// 确认核销
const getCheckOrderDoApi = async (id) => {
  const { code, msg } = await getCheckOrderDo({ id })
  tools.showToast(msg)
  if (code == 1) return tools.getPage()
}

// 核销界面数据
const getCheckResultApi = async (code) => {
  const res = await getCheckResult({ code })
  data.value = res
}

onLoad((option) => {
  // 核销界面数据
  getCheckResultApi(option.id)
})
</script>

<style>
page {
  background-color: #f9f9f9;
}
</style>
<style lang="scss" scoped>
.page {
  align-items: center;
  justify-content: center;
  background-color: #fff !important;
  image {
    width: 368rpx;
    height: 200rpx;
  }
  text {
    height: 40rpx;
    font-size: 28rpx;
    margin-top: 48rpx;
    line-height: 50rpx;
  }
  .btns {
    width: 370rpx;
    height: 100rpx;
    color: #e6425e;
    font-size: 32rpx;
    line-height: 100rpx;
    text-align: center;
    margin-top: 152rpx;
    border-radius: 10rpx;
    border: 1px solid #e6425e;
  }
}
.content {
  background-color: #fff;
  padding: 20rpx 28rpx 36rpx 28rpx;
  image {
    width: 100%;
    height: 400rpx;
    border-radius: 6rpx;
  }
  .title {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 50rpx;
    color: #000000;
    margin-top: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #eee;
  }
  .desc {
    .item {
      font-size: 28rpx;
      margin-top: 30rpx;
      align-items: flex-start;
      .label {
        color: #777777;
        margin-right: 20rpx;
      }
      .name {
        text {
          color: #333333;
          margin-bottom: 10rpx;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
.btn {
  color: #fff;
  width: 690rpx;
  height: 100rpx;
  font-size: 32rpx;
  text-align: center;
  line-height: 100rpx;
  border-radius: 6rpx;
  background: rgba(230, 66, 94);
  margin: 80rpx auto 0 auto;
}
</style>
